<template>
  <div class="demo">
     <h2>学校名称:{{ schoolName}}</h2> <!--使用自定义插件功能-->
     <h2>学校地址:{{ schooleAddress }}</h2>
      <!--方式1触发事件-->
     <!-- <button @click = "sendSchoolName">点击触发自定义事件给父组件传递数据</button> -->
     <!--方式2触发事件 ref-->
     <button @click = "sendSchoolName">点击触发自定义事件给父组件传递数据</button>
     <!--解绑事件-->
     <button @click="unbind">点击解绑自定义atguigu事件</button>
     <!--销毁组件-->
     <button @click="death">销毁当前school组件的实例对象</button>
   </div>
</template>

<script>
/**
 * 实现子组件向父组件传递数据的方式2：使用自定义的事件来实现
 */
export default {
    name:"School",  //和vue-devtools工具展示的名称保持一致
    data:function(){
        return {
            schoolName:'武汉科技大学 襄阳研究院',
            schooleAddress:"武汉市武昌区"
        }
    },
    methods:{
        sendSchoolName(){
            this.$emit("atguigu",this.schoolName,1,2,3)
            this.$emit("demo")
        },
        

        unbind(){
            //this.$off('atguigu') //解绑单个自定义的事件
            //this.$off(['atguigu','demo']) //解绑多个事件
            //this.$off() //解绑所有事件
        },
        //销毁vc
        death(){
            this.$destroy() //销毁当前组件实例，销毁后所有该实例的自定义事件都不奏效了
        }

    }
   
}
</script>

<style>
.demo{
    background-color: rgb(235, 131, 5);
}

</style>